<template>
  <div style="width: 100vw; height: 100vh">
    <video id="video" muted width="1200" height="800" ref="VideoRef"></video>
  </div>
</template>

<script setup>
import mpegts from "mpegts.js";
const VideoRef = ref(null);
onMounted(() => {
  if (mpegts.getFeatureList().mseLivePlayback) {
    var player = mpegts.createPlayer(
      {
        type: "flv", // could also be mpegts, m2ts, flv
        isLive: true,
        url: "http://123.207.255.51:8432/live?port=1935&app=live&stream=myapp",
        hasAudio: false,
        hasVideo: true,
      },
      {
        enableStashBuffer: false,
        liveBufferLatencyChasing: true,
        liveBufferLatencyChasingOnPaused: true,
        liveBufferLatencyMaxLatency: 3,
        liveSync: true,
        accurateSeek: true,
        liveBufferLatencyMaxLatency: 0.9,
        liveBufferLatencyMinRemain: 0.2,
        customSeekHandler: true,
      }
    );
    player.attachMediaElement(VideoRef.value);
    player.load();
    player.play();
    player.on(mpegts.Events.ERROR, (e) => {
      player.load();
      player.play();
    });
  }
  // mpegts.getFeatureList((res) => {
  //   console.log("================getFeatureList", res);
  // });
});
</script>
<style>
#video {
  transform: translate3d(0, 0, 0);
}
</style>
